import email from '@/assets/b_email.png';
import phone from '@/assets/b_phone.png';
import userIcon from '@/assets/user.png';
import userIcon1 from '@/assets/user1.png';
import { Divider, Popover, Space } from 'antd';
import { getIntl, getLocale } from 'umi';
import './index.less';

const intl = getIntl(getLocale());
const isEn = intl.locale == 'en-US';
export const customer = (
  <>
    <Popover
      overlayClassName="topInfo_modal"
      placement="bottom"
      content={
        <div>
          <Space style={{ marginLeft: 9 }} size={14}>
            <div>
              <img style={{ borderRadius: '50%' }} src={userIcon} width={58} height={58} />
            </div>
            <div style={{ color: '#333' }}>
              <div style={{ fontSize: 18, fontWeight: 700 }}>Alex Chou</div>
              <div style={{ lineHeight: '26px' }}>
                {intl.formatMessage({ id: 'home.user_manager' })}
              </div>
            </div>
          </Space>
          <Divider style={{ margin: '15px 0' }} />
          <div style={{ padding: '0 8px' }}>
            <Space align="center" style={{ color: '#333', marginBottom: 3 }}>
              <img src={phone} width={17} height={17} />
              <div style={{ marginTop: 3 }}> 8790556666</div>
            </Space>
            <Space align="center" style={{ color: '#333', marginBottom: 19 }}>
              <img src={email} width={17} height={17} />
              <div style={{ marginTop: 3 }}>8790556@gmail.com</div>
            </Space>
            <div style={{ fontSize: 13, color: '#333', lineHeight: '20px' }}>
              {intl.formatMessage({ id: 'home.alex_info' })}
            </div>
          </div>
        </div>
      }
      trigger="hover"
      transitionName={''}
    >
      <img
        style={{ margin: '0 8px', borderRadius: '50%', border: '1px solid #fff' }}
        src={userIcon}
        width={24}
        height={24}
      />
      <span>Alex Chou</span>
    </Popover>
    <span>{intl.formatMessage({ id: 'home.name_c' })}</span>
  </>
);

export const manager = (
  <>
    {isEn ? null : <span>{intl.formatMessage({ id: 'home.because' })}</span>}

    <Popover
      overlayClassName="topInfo_modal"
      placement="bottom"
      content={
        <div>
          <Space style={{ marginLeft: 9 }} size={14}>
            <div>
              <img style={{ borderRadius: '50%' }} src={userIcon1} width={58} height={58} />
            </div>
            <div style={{ color: '#333' }}>
              <div style={{ fontSize: 18, fontWeight: 700 }}>Denny Wong</div>
              <div style={{ lineHeight: '26px' }}>{intl.formatMessage({ id: 'home.boss' })}</div>
            </div>
          </Space>
          <Divider style={{ margin: '15px 0' }} />
          <div style={{ padding: '0 9px' }}>
            <Space align="center" style={{ color: '#333', marginBottom: 3 }}>
              <img src={phone} width={17} height={17} />
              <div style={{ marginTop: 3 }}> 8790556666</div>
            </Space>
            <Space align="center" style={{ color: '#333', marginBottom: 19 }}>
              <img src={email} width={17} height={17} />
              <div style={{ marginTop: 3 }}>8790556@gmail.com</div>
            </Space>
            <div style={{ fontSize: 13, color: '#333', lineHeight: '20px' }}>
              {intl.formatMessage({ id: 'home.customer_info' })}
            </div>
          </div>
        </div>
      }
      trigger="hover"
      transitionName={''}
    >
      <img
        style={{ margin: '0 9px', borderRadius: '50%', border: '1px solid #fff' }}
        src={userIcon1}
        width={24}
        height={24}
      />
      Denny Wong
    </Popover>
    <span>{intl.formatMessage({ id: 'home.name_b' })}</span>
  </>
);
